<template>
  <!-- 颜色设置 -->
  <a-modal
    :title="'颜色设置'"
    :visible="visible"
    :destroy-on-close="true"
    :confirm-loading="confirmLoading"
    :ok-text="'确定'"
    :cancel-text="'取消'"
    :mask-closable="false"
    :width="600"
    centered
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <div class="modal-content">
      <div class="data-color-classification">
        <!-- 数据项 -->
        <div class="left-data-content">
          <div class="model-title">数据项</div>
          <div v-if="visible" class="data-items">
            <div
              class="data-select-color"
              :style="{
                background: `linear-gradient(to right, ${successiveColors[
                  selectedColorIndex
                ].toString()})`,
              }"
            ></div>
          </div>
        </div>
        <div class="color-classification">
          <div class="model-title">发散颜色</div>
          <div class="successive-color-content four-scroll-y">
            <template v-for="(gradientColor, index) in successiveColors">
              <a-tooltip :key="index" placement="right">
                <template slot="title">
                  <span>{{ `配色${index + 1}` }}</span>
                </template>
                <div
                  class="color-transition-scheme"
                  :class="{ 'select-color': selectedColorIndex === index }"
                  @click="handleSelectColor(index)"
                >
                  <!-- 过渡色 -->
                  <div
                    class="color-transition"
                    :style="{
                      background: `linear-gradient(to right, ${gradientColor.toString()})`,
                    }"
                  ></div>
                  <!-- 颜色名称 -->
                  <div class="color-name">{{ `配色${index + 1}` }}</div>
                </div>
              </a-tooltip>
            </template>
          </div>
        </div>
      </div>

      <div class="opacity-boundary">
        <div class="opacity">
          不透明度:&nbsp;
          <a-slider v-model="opacity" style="width: 90px;" size="small" />
          <a-input-number
            v-model="opacity"
            style="margin-left: 6px; width: 50px;"
            size="small"
          />
          &nbsp;%
        </div>
        <div class="boundary">
          边界:&nbsp;
          <a-popover
            trigger="click"
            placement="bottomLeft"
            :overlay-class-name="'gis-boundary-popover'"
            :visible="gisBoundaryPopover"
            :disabled="layerType === 'line'"
          >
            <div
              class="boundary-select"
              :class="{ 'boundary-select-disable': layerType === 'line' }"
              @click="toggleBoundaryPopover"
            >
              <span class="boundary-select-text">
                {{ borderColorRadio === 1 ? '自动' : '无' }}
              </span>
              <a-icon-font type="iconicon-beifen" />
            </div>

            <div slot="content">
              <div class="auto-no">
                <a-radio-group v-model="borderColorRadio">
                  <a-radio :value="1">自动</a-radio>
                  <a-radio :value="2">无</a-radio>
                </a-radio-group>
              </div>
              <div class="boundary-color-title">边界颜色:</div>
              <div class="boundary-colors">
                <div class="color-items">
                  <div
                    v-for="(color, index) in colorList"
                    :key="index"
                    class="color-item"
                    :class="{
                      'select-border-color': selectBorderColor === color,
                    }"
                    @click="selectBorderColorHandler(color)"
                  >
                    <span
                      :style="{ background: color }"
                      class="color-item-color"
                    ></span>
                  </div>
                </div>
                <div class="boundary-opacity">
                  <a-slider
                    v-model="borderOpacity"
                    :style="{ width: '60%' }"
                    :disabled="layerType === 'fill'"
                    size="small"
                  />
                  <a-input-number
                    v-model="borderOpacity"
                    :style="{ width: '20%' }"
                    :disabled="layerType === 'fill'"
                    size="small"
                  />
                  &nbsp;%
                </div>
              </div>
            </div>
          </a-popover>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
/**
 * 离散型 颜色设置
 */
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import {
  successiveColors,
  borderColor,
} from '@/components/gis/layer-tags/attribute-tag/tags'
import generateColorGradient from '@/components/gis/layer-tags/attribute-tag/tag-color-utils'

@Component({
  components: {},
})
export default class SuccessiveColorSettingPopup extends Vue {
  @Prop({ type: Boolean, default: true }) visible!: boolean
  @Prop({ type: Array, default: () => [] }) successiveValues!: any[] // 连续属性统计值 [min, max]
  @Prop() layerType!: string | null

  @Watch('visible')
  public onVisible(value: boolean) {
    if (value) {
      this.selectedColorIndex = 0
      const [min, max] = this.successiveValues
      const colors = this.successiveColors[0]
      this.generateColorGradientMap = generateColorGradient(1, {
        min,
        max,
        step: 10,
        colors,
      }).value
    } else {
      this.gisBoundaryPopover = false
    }
  }

  public successiveColors: any[] = successiveColors // 连续型配色
  public selectedColorIndex: number | null = null // 选择的颜色
  public confirmLoading: boolean = false // 确认按钮loading
  public opacity: number = 100 // 不透明度
  public borderColorRadio: number = 2 // 边界颜色设置 自动-1, 无-2
  public gisBoundaryPopover: boolean = false // 边界 popover
  // 边框色板
  public colorList: string[] = borderColor
  public selectBorderColor: string = this.colorList[0]
  public borderOpacity: number = 100 // 边界不透明度

  private generateColorGradientMap: any = null

  @Watch('selectedColorIndex')
  public changeSelectedColorIndex(index: number) {
    if (this.successiveValues && index) {
      const [min, max] = this.successiveValues
      const colors = this.successiveColors[index]
      this.generateColorGradientMap = generateColorGradient(1, {
        min,
        max,
        step: 10,
        colors,
      }).value
    }
  }

  /**
   * 选择颜色
   */
  public handleSelectColor(index: any) {
    this.selectedColorIndex = index
  }

  public toggleBoundaryPopover() {
    if (this.layerType && this.layerType === 'line') {
      return
    }
    this.gisBoundaryPopover = !this.gisBoundaryPopover
  }

  public selectBorderColorHandler(color: string) {
    this.selectBorderColor = color
    if (this.borderColorRadio === 1) {
      this.gisBoundaryPopover = false
    }
  }

  /**
   * 确认
   */
  public handleOk() {
    if (this.selectedColorIndex === null) {
      this.$message.warning('请选择颜色')
    } else {
      const colorInfo: any = {
        colorGradientMap: this.generateColorGradientMap,
        colors: this.successiveColors[this.selectedColorIndex],
        index: this.selectedColorIndex,
        opacity: this.opacity / 100,
      }
      if (this.borderColorRadio === 1) {
        colorInfo.border = true
        colorInfo.borderColor = this.selectBorderColor
        colorInfo.borderOpacity = this.borderOpacity / 100
      }
      this.$emit('confirm', colorInfo)
    }
  }

  /**
   * 取消
   */
  public handleCancel() {
    this.$emit('cancel')
  }

  public handleMenuClick() {}
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';
@import '@/components/gis/layer-tags/color-modal.less';

.data-select-color {
  box-shadow: #f1f1f1 0 0 0 1px inset;
  height: 16px;
  margin-right: 12px;
  width: calc(100% - 50px);
}
</style>

<style lang="less">
.gis-boundary-popover {
  .ant-popover-content {
    width: 250px;

    .ant-popover-inner {
      box-shadow: 0 0 8px #c5c9ff;

      .ant-popover-inner-content {
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
        overflow: hidden;
        padding: 12px;
        width: 250px;

        .auto-no {
          margin-bottom: 12px;
        }

        .boundary-color-title {
          color: #5d637e;
          font-size: 14px;
          font-weight: 400;
          height: 20px;
          letter-spacing: 1px;
          line-height: 20px;
          margin-bottom: 6px;
          width: 75px;
        }

        .boundary-colors {
          background: #fafafc;

          .color-item {
            align-items: center;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            height: 23px;
            justify-content: center;
            margin: 4px;
            width: 23px;

            .color-item-color {
              border-radius: 50%;
              display: inline-block;
              height: 19px;
              width: 19px;
            }
          }

          .select-border-color {
            border: 1px solid #5e647f;
          }

          .boundary-opacity {
            align-items: center;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
